<template>
  <dict-data-search
    ref="searchRef"
    style="margin-bottom: -14px"
    @search="reload"
    :cache-key="getCurrentInstance().type.name"
  />
  <ele-pro-table
    ref="tableRef"
    row-key="dict_data_id"
    :columns="columns"
    :datasource="datasource"
    :show-overflow-tooltip="true"
    v-model:selections="selections"
    :highlight-current-row="true"
    :pagination="pagination"
    :loading="loading"
    :export-config="{ fileName: '字典数据', datasource: exportSource }"
    :print-config="{ datasource: exportSource }"
    :style="{ paddingBottom: '16px' }"
    :cache-key="getCurrentInstance().type.name"
  >
    <template #toolbar>
      <el-button
        type="primary"
        class="ele-btn-icon"
        :icon="PlusOutlined"
        @click="openAdd()"
      >
        新建
      </el-button>
      <el-button
        type="danger"
        class="ele-btn-icon"
        :icon="DeleteOutlined"
        @click="remove('remove')"
      >
        删除
      </el-button>
    </template>
    <template #action="{ row }">
      <el-link type="primary" underline="never" @click="openView(row)">
        查看
      </el-link>
      <el-divider direction="vertical" />
      <el-link type="primary" underline="never" @click="openAudit(row)">
        审核
      </el-link>
      <el-divider direction="vertical" />
      <el-link type="primary" underline="never" @click="openEdit(row)">
        修改
      </el-link>
      <el-divider direction="vertical" />
      <el-link type="danger" underline="never" @click="remove('remove', row)">
        删除
      </el-link>
    </template>
  </ele-pro-table>
  <!-- <dict-data-edit
    v-model="showEdit"
    :data="current"
    :dict_id="dict_id"
    @done="reload"
  /> -->

  <!-- 新增 -->
  <dict-data-edit
    action="add"
    :dict_id="dict_id"
    v-model="showAdd"
    @done="reload"
  />

  <!-- 修改 -->
  <dict-data-edit
    action="edit"
    :dict_id="dict_id"
    :data="current"
    v-model="showEdit"
    @done="reload"
  />

  <!-- 审核 -->
  <dict-data-edit
    action="audit"
    :dict_id="dict_id"
    :data="current"
    v-model="showAudit"
    @done="reload"
  />

  <!-- 查看 -->
  <dict-data-edit
    action="view"
    :dict_id="dict_id"
    :data="current"
    v-model="showView"
  />
</template>

<script setup>
import { ref, watch, getCurrentInstance } from "vue";
import { PlusOutlined, DeleteOutlined } from "@/components/icons";
import { useModal } from "@/hooks/useModal";
import { useTable } from "@/hooks/useTable";
import DictDataSearch from "./dict-data-search.vue";
import DictDataEdit from "./dict-data-edit.vue";
import {
  pageDictionaryData,
  removeDictionaryDataBatch,
  listDictionaryData,
} from "@/api/system/dictionary-data";

// 在文件顶部导入useOperator
import { useOperator } from "@/hooks/operator";
defineOptions({ name: "SystemDictDataTable" });

const props = defineProps({
  /** 字典id */
  dict_id: Number,
});

/** 搜索栏实例 */
const searchRef = ref(null);

// /** 表格实例 */
// const tableRef = ref(null);

/** 表格列配置 */
const columns = ref([
  {
    type: "selection",
    columnKey: "selection",
    width: 50,
    align: "center",
    fixed: "left",
  },
  {
    prop: "dict_data_name",
    label: "字典数据名",
    sortable: "custom",
    minWidth: 120,
  },
  {
    prop: "dict_data_code",
    label: "字典数据值",
    sortable: "custom",
    minWidth: 120,
  },
  {
    prop: "sort_number",
    label: "排序号",
    sortable: "custom",
    width: 100,
    align: "center",
  },
  {
    prop: "created_at",
    label: "创建时间",
    sortable: "custom",
    width: 180,
    align: "center",
  },
  {
    columnKey: "action",
    label: "操作",
    width: 230,
    align: "center",
    slot: "action",
    hideInPrint: true,
    hideInExport: true,
  },
]);

const {
  loading,
  pagination,
  tableRef,
  datasource,
  reload,
  current,
  selections,
} = useTable({
  getPages: pageDictionaryData,
  beforeQuery: (params) => {
    // 可以修改或添加查询参数
    console.log("查询参数:", params); // 调试用，实际不需要这一行
    return {
      ...params,
      ...params.where,
      dict_id: props.dict_id, // 确保dict_id被包含
    };
  },
  afterQuery: () => {
    // 查询后处理
  },
});

// 使用hook创建各个弹窗
const { visible: showAdd, open: openAdd } = useModal({
  beforeOpen: async () => {
    current.value = null; // 新增时重置数据
    // if (!props.dict_ids) {
    //   throw new Error("请先选择字典");
    // }
  },
});

const { visible: showEdit, open: openEdit } = useModal({
  beforeOpen: async (row) => {
    current.value = row; // 设置当前行数据
    // if (!row?.editable) {
    //   throw new Error("没有编辑权限");
    // }
  },
});

const { visible: showView, open: openView } = useModal({
  beforeOpen: async (row) => {
    current.value = row; // 设置当前行数据
  },
});

const { visible: showAudit, open: openAudit } = useModal({
  beforeOpen: async (row) => {
    current.value = row; // 设置当前行数据
  },
});

/** 删除 */
// 替换原有的remove方法
const { action: remove } = useOperator({
  actionConfigs: {
    remove: {
      title: "删除",
      confirmText: "确定要删除{%s}这些数据吗?",
      api: removeDictionaryDataBatch,
      beforeSubmit: (params) => {
        // 可以修改或添加提交参数
        console.log("[DEBUG] beforeSubmit 钩子被调用", params);
        return params; // 必须返回处理后的参数
      },
    },
  },

  selections,
  reload,
  idField: "dict_data_id",
  idName: "dict_data_name",
});

// 监听字典id变化
watch(
  () => props.dict_id,
  () => {
    searchRef.value?.resetFields?.();
    reload({});
  },
);

/** 导出和打印全部数据的数据源 */
const exportSource = ({ where, orders }) => {
  return listDictionaryData({
    ...where,
    ...orders,
    dict_id: props.dict_id,
  });
};
</script>
